import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import '../controllers/cartoon_info_controller.dart';

import '../common/constants.dart';
import '../widgets/cartoon_info_pipe_list_view.dart';
import '../widgets/cartoon_intro.dart';
import '../widgets/sliver_tab_bar_delegate.dart';
import '../widgets/sliver_tab_bar_view.dart';

class CartoonInfoPage extends StatelessWidget {
  const CartoonInfoPage({super.key});

  @override
  Widget build(BuildContext context) {
    final CartoonInfoController controller = Get.put(CartoonInfoController());
    return Obx(() {
      if (controller.cartoon.value == null) {
        return Container(
          color: Colors.white,
          child: Center(
            child: LoadingAnimationWidget.progressiveDots(
              color: Constants.themeColor,
              size: 100,
            ),
          ),
        );
      }

      return Stack(children: [
        CachedNetworkImage(
          width: double.infinity,
          fadeInDuration: const Duration(seconds: 0),
          fadeOutDuration: const Duration(seconds: 0),
          fit: BoxFit.cover,
          errorWidget: (_, url, object) {
            return Container(color: Colors.red);
          },
          imageUrl: controller.coverUrl.value ?? "",
        ),
        Container(
          margin: EdgeInsets.only(top: 80 + Get.statusBarHeight),
          width: double.infinity,
          height: 240,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.transparent,
                Colors.black,
              ],
              stops: [0.0, 1.0],
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            foregroundColor: Colors.white,
            elevation: 0,
          ),
          body: SafeArea(
            bottom: false,
            child: NestedScrollView(
              controller: controller.scrollController,
              headerSliverBuilder: (context, _) => [
                SliverToBoxAdapter(
                  child: SizedBox(height: 320, child: CartoonIntro(cartoon: controller.cartoon.value!, dominantColor: null)),
                ),
              ],
              body: ClipRRect(
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(16),
                  topRight: Radius.circular(16),
                ),
                child: ColoredBox(
                  color: Colors.white,
                  child: DefaultTabController(
                    length: controller.tabItems.length,
                    child: CustomScrollView(
                      physics: const NeverScrollableScrollPhysics(),
                      controller: controller.scrollController,
                      slivers: [
                        SliverPersistentHeader(
                          delegate: SliverTabBarDelegate(
                            tabBar: TabBar(
                                tabs: controller.tabItems.map((item) {
                                  return Tab(text: item);
                                }).toList(),
                                dividerHeight: 0),
                            topRadius: Radius.zero,
                            backgroundColor: Colors.white,
                          ),
                          pinned: true,
                        ),
                        SliverTabBarView(
                          color: Colors.white,
                          children: [CartoonInfoPipeListView(cartoonId: controller.cartoonId)],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ]);
    });
  }
}
